/*
 * @Author: your name
 * @Date: 2021-04-20 17:49:21
 * @LastEditTime: 2021-04-21 11:01:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue03-demo\src\views\home.ts
 */
import { computed, ref, watch, watchEffect, reactive } from 'vue'

export const utils = () => {
  const counter = ref(0)
  const state = reactive({
    lists: [
      {
        id: 1,
        text: 'zhang san'
      },
      {
        id: 2,
        text: 'li si'
      }
    ]
  })
  let num = 2
  // const total = ref(0)
  console.log('counter :>> ', counter)
  console.log('counter :>> ', num)
  // console.log('counter :>> ', total)
  const add = () => {
    counter.value++
  }
  const minusEventHandler = () => {
    counter.value--
  }

  const modify = () => {
    num = 3
    console.log('num :>> ', num)
  }

  const setList = () => {
    state.lists[0].text = 'changed'
  }

  // watchEffect(() => {
  //   const total = counter.value * 2
  //   console.log('total :>> ', total)
  // })

  // watch([counter, total], (newval, oldval) => {
  //   console.log('newval :>> ', newval)
  //   console.log('oldval :>> ', oldval)
  // })

  return {
    counter,
    add,
    minusEventHandler,
    total: computed(() => counter.value * num),
    modify,
    state,
    setList
  }
}
